<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 Grid布局</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        /* 演示用样式 */
        .grid-demo {
            margin: 20px 0;
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 4px;
        }
        .grid-container {
            display: grid;
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 15px;
        }
        .grid-item {
            background-color: #0099cc;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
        }
        .grid-item:nth-child(odd) {
            background-color: #0077aa;
        }
        .grid-template-columns-1 {
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }
        .grid-template-columns-2 {
            grid-template-columns: 100px auto 200px;
            gap: 10px;
        }
        .grid-template-columns-3 {
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .grid-template-rows-1 {
            grid-template-rows: 50px 100px;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .grid-template-areas-1 {
            grid-template-areas:
                "header header header"
                "sidebar content content"
                "footer footer footer";
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto 1fr auto;
            gap: 10px;
        }
        .grid-area-header {
            grid-area: header;
        }
        .grid-area-sidebar {
            grid-area: sidebar;
        }
        .grid-area-content {
            grid-area: content;
        }
        .grid-area-footer {
            grid-area: footer;
        }
        .grid-column-row-1 {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 80px);
            gap: 10px;
        }
        .grid-item-span-1 {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
        }
        .grid-item-span-2 {
            grid-column: 3 / 4;
            grid-row: 1 / 3;
        }
        .grid-item-span-3 {
            grid-column: 1 / 2;
            grid-row: 2 / 4;
        }
        .grid-item-span-4 {
            grid-column: 2 / 4;
            grid-row: 3 / 4;
        }
        .grid-auto-flow-row {
            grid-template-columns: repeat(3, 1fr);
            grid-auto-flow: row;
            gap: 10px;
        }
        .grid-auto-flow-column {
            grid-template-rows: repeat(3, 80px);
            grid-auto-flow: column;
            gap: 10px;
        }
        .grid-auto-flow-dense {
            grid-template-columns: repeat(3, 1fr);
            grid-auto-flow: row dense;
            gap: 10px;
        }
        .grid-align-items {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px;
            align-items: center;
            gap: 10px;
        }
        .grid-justify-items {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 100px;
            justify-items: center;
            gap: 10px;
        }
        .grid-align-content {
            height: 300px;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(2, 50px);
            align-content: space-between;
            gap: 10px;
        }
        .grid-justify-content {
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: 50px;
            justify-content: space-between;
            gap: 10px;
        }
        .grid-item-tall {
            height: 60px;
        }
        .grid-item-wide {
            width: 60px;
        }
        .grid-item-align-self-start {
            align-self: start;
        }
        .grid-item-align-self-center {
            align-self: center;
        }
        .grid-item-align-self-end {
            align-self: end;
        }
        .grid-item-justify-self-start {
            justify-self: start;
        }
        .grid-item-justify-self-center {
            justify-self: center;
        }
        .grid-item-justify-self-end {
            justify-self: end;
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">首页</a>
        <a href="css3-selectors.html">CSS选择器</a>
        <a href="css3-box-model.html">盒模型</a>
        <a href="css3-layout-flexbox.html">Flexbox布局</a>
        <a href="css3-layout-grid.html">Grid布局</a>
        <a href="css3-colors-gradients.html">颜色与渐变</a>
        <a href="css3-transforms.html">变换</a>
        <a href="css3-transitions-animations.html">过渡与动画</a>
        <a href="css3-responsive.html">响应式设计</a>
    </nav>

    <h1>CSS3 Grid布局</h1>
    
    <section>
        <h2>Grid 布局概述</h2>
        <div class="example">
            <p>CSS Grid 布局是一个二维布局系统，专为设计复杂的网页布局而创建。它允许开发者创建基于行和列的网格，然后将元素放置在这些网格中的精确位置。</p>
            
            <p>Grid 布局特别适合于：</p>
            <ul>
                <li>创建复杂的二维布局，如杂志或报纸风格的页面</li>
                <li>精确控制元素在页面上的位置</li>
                <li>创建不规则布局，如瀑布流</li>
                <li>实现响应式设计，在不同屏幕尺寸下重新排列元素</li>
            </ul>
            
            <div class="code">
                /* 创建一个 grid 容器 */
                .container {
                    display: grid;
                }
                
                /* 或者创建一个行内 grid 容器 */
                .container {
                    display: inline-grid;
                }
            </div>
        </div>
        
        <div class="note">
            <p><strong>重要概念：</strong> Grid 布局基于两个主要组件：grid 容器（父元素）和 grid 项目（子元素）。当一个元素设置为 <code>display: grid</code> 或 <code>display: inline-grid</code> 时，它成为 grid 容器，其直接子元素自动成为 grid 项目。</p>
        </div>
    </section>
    
    <section>
        <h2>Grid 容器属性</h2>
        <div class="example">
            <h3>grid-template-columns 和 grid-template-rows（定义列和行）</h3>
            <div class="code">
                /* 使用固定单位 */
                grid-template-columns: 100px 200px 100px;
                grid-template-rows: 50px 100px 50px;
                
                /* 使用弹性单位 fr */
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-rows: auto 1fr auto;
                
                /* 使用 repeat() 函数 */
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 100px);
                
                /* 混合使用不同单位 */
                grid-template-columns: 100px auto 200px;
                
                /* 使用 minmax() 函数 */
                grid-template-columns: repeat(3, minmax(100px, 1fr));
                
                /* 使用 auto-fill 和 auto-fit */
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            </div>
            
            <div class="grid-demo">
                <p><strong>使用 fr 单位（1fr 1fr 1fr）：</strong></p>
                <div class="grid-container grid-template-columns-1">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                </div>
                
                <p><strong>混合单位（100px auto 200px）：</strong></p>
                <div class="grid-container grid-template-columns-2">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                </div>
                
                <p><strong>使用 repeat() 函数（repeat(3, 1fr)）：</strong></p>
                <div class="grid-container grid-template-columns-3">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                </div>
                
                <p><strong>定义行高（grid-template-rows: 50px 100px）：</strong></p>
                <div class="grid-container grid-template-rows-1">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                </div>
            </div>
            
            <h3>grid-template-areas（定义区域）</h3>
            <div class="code">
                /* 定义网格区域 */
                grid-template-areas:
                    "header header header"
                    "sidebar content content"
                    "footer footer footer";
                
                /* 使用 . 表示空单元格 */
                grid-template-areas:
                    "header header ."
                    "sidebar content content"
                    ". footer footer";
            </div>
            
            <div class="grid-demo">
                <p><strong>使用 grid-template-areas：</strong></p>
                <div class="grid-container grid-template-areas-1">
                    <div class="grid-item grid-area-header">Header</div>
                    <div class="grid-item grid-area-sidebar">Sidebar</div>
                    <div class="grid-item grid-area-content">Content</div>
                    <div class="grid-item grid-area-footer">Footer</div>
                </div>
            </div>
            
            <h3>grid-template（grid-template-rows、grid-template-columns 和 grid-template-areas 的简写）</h3>
            <div class="code">
                grid-template:
                    "header header header" 50px
                    "sidebar content content" 1fr
                    "footer footer footer" 50px
                    / 1fr 2fr 1fr;
            </div>
            <p>上面的代码等同于：</p>
            <div class="code">
                grid-template-rows: 50px 1fr 50px;
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-areas:
                    "header header header"
                    "sidebar content content"
                    "footer footer footer";
            </div>
            
            <h3>column-gap、row-gap 和 gap（网格间距）</h3>
            <div class="code">
                column-gap: 20px;  /* 列间距 */
                row-gap: 10px;     /* 行间距 */
                
                /* 简写形式 */
                gap: 10px 20px;    /* 行间距 列间距 */
                gap: 15px;         /* 行列间距相同 */
            </div>
            
            <h3>grid-auto-columns 和 grid-auto-rows（自动生成的网格轨道大小）</h3>
            <div class="code">
                grid-auto-columns: 100px;
                grid-auto-rows: minmax(100px, auto);
            </div>
            <p>这些属性定义了自动生成的网格轨道（隐式网格轨道）的大小。</p>
            
            <h3>grid-auto-flow（自动放置算法）</h3>
            <div class="code">
                grid-auto-flow: row;       /* 默认值，先填满行，再换到下一行 */
                grid-auto-flow: column;    /* 先填满列，再换到下一列 */
                grid-auto-flow: dense;     /* 尝试填充网格中的空白区域 */
                grid-auto-flow: row dense; /* 组合使用 */
            </div>
            
            <div class="grid-demo">
                <p><strong>grid-auto-flow: row（默认）：</strong></p>
                <div class="grid-container grid-auto-flow-row">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                </div>
                
                <p><strong>grid-auto-flow: column：</strong></p>
                <div class="grid-container grid-auto-flow-column">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                </div>
            </div>
            
            <h3>grid（所有 grid 属性的简写）</h3>
            <div class="code">
                grid: 100px 300px / auto-flow 200px;
            </div>
            <p>这是一个非常强大但复杂的简写属性，可以设置所有 grid 相关的属性。由于其复杂性，通常建议使用单独的属性。</p>
        </div>
        
        <div class="note">
            <p><strong>fr 单位：</strong> fr 代表"分数"，是 Grid 布局中的一个特殊单位，用于按比例分配可用空间。例如，<code>1fr 2fr 1fr</code> 将可用空间分为 4 份，中间列占 2 份，两侧各占 1 份。</p>
        </div>
    </section>
    
    <section>
        <h2>Grid 项目属性</h2>
        <div class="example">
            <h3>grid-column 和 grid-row（指定项目位置）</h3>
            <div class="code">
                /* 使用网格线编号 */
                grid-column: 1 / 3;  /* 从第1条列线到第3条列线 */
                grid-row: 2 / 4;     /* 从第2条行线到第4条行线 */
                
                /* 使用 span 关键字 */
                grid-column: 1 / span 2;  /* 从第1条列线开始，跨越2个单元格 */
                grid-row: span 2 / 4;     /* 跨越2个单元格，结束于第4条行线 */
                
                /* 简写形式 */
                grid-column: 1 / -1;  /* 从第1条列线到最后一条列线 */
                grid-row: 1;          /* 只指定起始线，默认跨越1个单元格 */
            </div>
            
            <div class="grid-demo">
                <p><strong>使用 grid-column 和 grid-row 定位项目：</strong></p>
                <div class="grid-container grid-column-row-1">
                    <div class="grid-item grid-item-span-1">1 (跨2列)</div>
                    <div class="grid-item grid-item-span-2">2 (跨2行)</div>
                    <div class="grid-item grid-item-span-3">3 (跨2行)</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item grid-item-span-4">5 (跨2列)</div>
                </div>
            </div>
            
            <h3>grid-area（指定项目放置在哪个区域）</h3>
            <div class="code">
                /* 使用已命名的区域 */
                grid-area: header;
                
                /* 使用网格线编号（row-start / column-start / row-end / column-end） */
                grid-area: 1 / 1 / 3 / 4;
            </div>
            <p>grid-area 可以引用 grid-template-areas 中定义的区域名称，或者直接使用网格线编号来定位项目。</p>
            
            <h3>justify-self 和 align-self（单个项目的水平和垂直对齐方式）</h3>
            <div class="code">
                /* 水平对齐 */
                justify-self: start;    /* 左对齐 */
                justify-self: center;   /* 水平居中 */
                justify-self: end;      /* 右对齐 */
                justify-self: stretch;  /* 默认值，拉伸填满单元格宽度 */
                
                /* 垂直对齐 */
                align-self: start;      /* 顶部对齐 */
                align-self: center;     /* 垂直居中 */
                align-self: end;        /* 底部对齐 */
                align-self: stretch;    /* 默认值，拉伸填满单元格高度 */
            </div>
            
            <div class="grid-demo">
                <p><strong>justify-self 示例：</strong></p>
                <div class="grid-container grid-template-columns-1">
                    <div class="grid-item grid-item-wide grid-item-justify-self-start">start</div>
                    <div class="grid-item grid-item-wide grid-item-justify-self-center">center</div>
                    <div class="grid-item grid-item-wide grid-item-justify-self-end">end</div>
                </div>
                
                <p><strong>align-self 示例：</strong></p>
                <div class="grid-container grid-template-columns-1" style="height: 150px;">
                    <div class="grid-item grid-item-tall grid-item-align-self-start">start</div>
                    <div class="grid-item grid-item-tall grid-item-align-self-center">center</div>
                    <div class="grid-item grid-item-tall grid-item-align-self-end">end</div>
                </div>
            </div>
            
            <h3>place-self（align-self 和 justify-self 的简写）</h3>
            <div class="code">
                place-self: center;        /* 垂直和水平都居中 */
                place-self: start end;     /* 垂直顶部对齐，水平右对齐 */
            </div>
        </div>
        
        <div class="note">
            <p><strong>网格线编号：</strong> 在 Grid 布局中，网格线从 1 开始编号。例如，一个 3x3 的网格有 4 条行线和 4 条列线。也可以使用负数从末尾开始计数，如 -1 表示最后一条线。</p>
        </div>
    </section>
    
    <section>
        <h2>Grid 容器对齐属性</h2>
        <div class="example">
            <h3>justify-items 和 align-items（所有项目的水平和垂直对齐方式）</h3>
            <div class="code">
                /* 水平对齐所有项目 */
                justify-items: start;    /* 左对齐 */
                justify-items: center;   /* 水平居中 */
                justify-items: end;      /* 右对齐 */
                justify-items: stretch;  /* 默认值，拉伸填满单元格宽度 */
                
                /* 垂直对齐所有项目 */
                align-items: start;      /* 顶部对齐 */
                align-items: center;     /* 垂直居中 */
                align-items: end;        /* 底部对齐 */
                align-items: stretch;    /* 默认值，拉伸填满单元格高度 */
            </div>
            
            <div class="grid-demo">
                <p><strong>justify-items: center：</strong></p>
                <div class="grid-container grid-template-columns-1 grid-justify-items">
                    <div class="grid-item grid-item-wide">1</div>
                    <div class="grid-item grid-item-wide">2</div>
                    <div class="grid-item grid-item-wide">3</div>
                </div>
                
                <p><strong>align-items: center：</strong></p>
                <div class="grid-container grid-template-columns-1 grid-align-items">
                    <div class="grid-item grid-item-tall">1</div>
                    <div class="grid-item grid-item-tall">2</div>
                    <div class="grid-item grid-item-tall">3</div>
                </div>
            </div>
            
            <h3>place-items（align-items 和 justify-items 的简写）</h3>
            <div class="code">
                place-items: center;        /* 垂直和水平都居中 */
                place-items: start end;     /* 垂直顶部对齐，水平右对齐 */
            </div>
            
            <h3>justify-content 和 align-content（网格在容器中的水平和垂直对齐方式）</h3>
            <div class="code">
                /* 水平对齐整个网格 */
                justify-content: start;         /* 左对齐 */
                justify-content: center;        /* 水平居中 */
                justify-content: end;           /* 右对齐 */
                justify-content: stretch;       /* 默认值，拉伸填满容器宽度 */
                justify-content: space-around;  /* 均匀分布，两端有一半的间距 */
                justify-content: space-between; /* 均匀分布，两端对齐 */
                justify-content: space-evenly;  /* 均匀分布，包括两端 */
                
                /* 垂直对齐整个网格 */
                align-content: start;           /* 顶部对齐 */
                align-content: center;          /* 垂直居中 */
                align-content: end;             /* 底部对齐 */
                align-content: stretch;         /* 默认值，拉伸填满容器高度 */
                align-content: space-around;    /* 均匀分布，两端有一半的间距 */
                align-content: space-between;   /* 均匀分布，两端对齐 */
                align-content: space-evenly;    /* 均匀分布，包括两端 */
            </div>
            
            <div class="grid-demo">
                <p><strong>justify-content: space-between：</strong></p>
                <div class="grid-container grid-justify-content">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                </div>
                
                <p><strong>align-content: space-between：</strong></p>
                <div class="grid-container grid-align-content">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>
            
            <h3>place-content（align-content 和 justify-content 的简写）</h3>
            <div class="code">
                place-content: center;                /* 垂直和水平都居中 */
                place-content: space-between center;  /* 垂直两端对齐，水平居中 */
            </div>
        </div>
    </section>
    
    <section>
        <h2>Grid 布局实例</h2>
        <div class="example">
            <h3>经典网页布局</h3>
            <div class="code">
                .grid-layout {
                    display: grid;
                    grid-template-areas:
                        "header header header"